<template>
	<view>
		<view class="address flex-row align-start" @click="show=true">
			<image src="../../static/images/ad2.png" style="width: 32rpx;height: 32rpx;margin: 4rpx 8rpx 0 0;"></image>
			<view style="width:580rpx;">
				<view class="flex-row align-center u-line-1">
					<text class="name">{{address.name}}</text>
					<text class="phone">{{address.mobile}}</text>
					<view class="df" v-if="address.is_default==1">默认</view>
				</view>
				<view class="pos u-line-2">{{address.province+address.city+address.district+address.detail}}</view>
			</view>
			<u-icon size="20" name="arrow-right" style="margin: 8rpx 0 0 32rpx;"></u-icon>
		</view>

		<u-gap height="24"></u-gap>
		<view class="good">
			<view>商品清单</view>
			<u-gap height="24"></u-gap>
			<view class="flex-row justify-between">
				<image :src="order.goods_pic" class="img" mode="aspectFill"></image>
				<view>
					<view class="name u-line-2">{{order.goods_name}} {{order.sku}}</view>
					<view class="name u-line-1">数量：{{order.quantity}}</view>
					<view class="name score u-line-1">{{order.total_price}}积分</view>
				</view>
			</view>
		</view>

		<u-gap height="24"></u-gap>
		<view class="row">
			<view>费用明细</view>
		</view>
		<view class="row">
			<view>商品积分</view>
			<view class="sub">{{order.total_price}}积分</view>
		</view>
		<view class="row">
			<view>运费</view>
			<view class="sub">包邮</view>
		</view>

		<u-gap height="24"></u-gap>
		<view class="row">
			<view></view>
			<view>应支付：<text class="text-primary">{{order.total_price}}</text></view>
		</view>

		<my-btn style="margin: 60rpx auto;" gold @click="setAddress">确认兑换</my-btn>
		
		<address-popup v-if="order" :show="show" :df="order.address_id" @close="show=false" @select="select"></address-popup>
		
		<!-- 支付 -->
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
		 v-model="payShow" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{order.total_price}}</text>
					<text class="u-font-20 u-padding-left-10">积分</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	import addressPopup from '../address/popup.vue'
	export default {
		components: {
			addressPopup
		},
		data() {
			return {
				no: '',
				show: false,
				address: '',
				order: '',
				payShow: false,
				password: ''
			};
		},
		onLoad(opt) {
			this.no = opt.no
			this.getData()
		},
		methods: {
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
			
				if (this.password.length >= 6) {
					this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			showPop(flag = true) {
				this.password = '';
				this.payShow = flag;
			},
			getData() {
				this.$u.get('mall/order/detail?trade_no='+this.no).then(res => {
					this.order = res.data.result.order
				})
			},
			select(e) {
				this.address = e
			},
			setAddress() {
				this.$u.get('/mall/order/address/set', {
					trade_no: this.no,
					address_id: this.address.id
				}).then(res => {
					if (res.data.code==0) {
						this.payShow = true
					}
				})
			},
			pay() {
				this.$u.post('/mall/order/pay', {
					trade_no: this.no,
					paypwd: this.password
				}).then(res => {
					this.showPop(false)
					if (res.data.code==0) {
						this.$msg(res.data.msg)
						this.$goto('/pages/mall/order?no='+this.no, 'redirect')
					} else if (res.data.code==-10002) {
						this.$msg(res.data.msg, 1000, true).then(res => this.$goto(1))
					} else {
						this.$msg(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.money {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
	
		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.address {
		width:750rpx;
		height:184rpx;
		background:rgba(255,255,255,1);
		padding: 26rpx 40rpx;
		.name {
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:40rpx;
			margin-right: 24rpx;
		}
		.tel {
			font-size:24rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			line-height:36rpx;
		}
		.pos {
			height:72rpx;
			font-size:24rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			margin-top: 8rpx;
			line-height:36rpx;
		}
		.df {
			width:70rpx;
			height:28rpx;
			background:rgba(238,188,128,1);
			border-radius:4rpx;
			text-align: center;
			margin-left: 24rpx;
			font-size:22rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
			line-height:30rpx;
		}
	}
	.good {
		width: 750rpx;
		height: 280rpx;
		background: rgba(255, 255, 255, 1);
		padding: 24rpx 40rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;

		.img {
			width: 220rpx;
			height: 162rpx;
			object-fit: cover;
			border-radius: 8rpx;
		}

		.name {
			font-size: 24rpx;
			width: 420rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 40rpx;
		}
		
		.score {
			color: rgba(255, 139, 86, 1);
		}
	}

	.row {
		width: 750rpx;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, 1);
		padding: 0 40rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;

		&::after {
			content: '';
			width: 672rpx;
			height: 2rpx;
			background: rgba(232, 232, 232, 0.6);
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.sub {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>
